<template>
	<view class="QuotePost">
		<view class="scroll">
			<scroll-view scroll-x="true">
				<view
					@click="getList('allDigest')"
					:class="tabHover == 'allDigest'?'hover':''">
					<text>精华帖</text>
				</view>
				<view
					@click="getList('stickyState')"
					:class="tabHover == 'stickyState'?'hover':''">
					<text>置顶帖</text>
				</view>
				<view
					@click="getList('like')"
					:class="tabHover == 'like'?'hover':''">
					<text>点赞排行</text>
				</view>
				<view
					@click="getList('follow')"
					:class="tabHover == 'follow'?'hover':''">
					<text>收藏排行</text>
				</view>
				<view
					@click="getList('comment')"
					:class="tabHover == 'comment'?'hover':''">
					<text>回帖排行</text>
				</view>
				<view
					@click="getList('new')"
					:class="tabHover == 'new'?'hover':''">
					<text>最新贴</text>
				</view>
			</scroll-view>
		</view>
		<view class="list" v-if="listPostState == 'success'">
			<view
				@click="clickPost(item.pid,item.title,item.content)"
				class="for"
				v-for="(item,index) in listPost">
				<text class="order">{{index+1}}.</text>
				<text class="title">{{item.title?item.title:$_filterHtml(item.content)}}</text>
				<text class="quote">引用</text>
			</view>
			<view
				@click="getList(tabHover,'more')"
				class="more">点击加载更多</view>
		</view>
		<template v-if="listPostState == 'loading'">
			<public-loading></public-loading>
		</template>
		<template v-if="listPostState == 'empty'">
			<public-empty></public-empty>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabHover:"stickyState",
				yrConfig:null,
				listPost:[],
				listPostPage:2,
				listPostState:"loading",
			}
		},
		onLoad(e) {
			if(e.uniqueId){
				this.uniqueId = e.uniqueId
			}else{
				this.uniqueId = "";
			}
			uni.request({
				url:this.$_Config() + "Config.json",
				method:'GET',
				success: (res) => {
					this.yrConfig = res.data;
					this.getList('stickyState');
				}
			})
		},
		methods: {
			getList(type,more){
				if(more != 'more'){
					this.listPostState = "loading";
				}
				// 置顶帖
				if(type=='stickyState'){
					this.tabHover = "stickyState";
				}
				// 精华帖
				if(type=='allDigest'){
					this.tabHover = "allDigest";
				}
				
				if(type=='like'||type=='follow'||type=='comment'||type=='new'){
					// 点赞排行
					if(type=='like'){
						this.tabHover = "like";
						this.types="like";
					}
					// 收藏排行
					if(type=='follow'){
						this.tabHover = "follow";
						this.types="follow";
					}
					// 回帖排行
					if(type=='comment'){
						this.tabHover = "comment";
						this.types="comment";
					}
					// 最新帖
					if(type=='new'){
						this.tabHover = "new";
						this.types="";
					}
				}
				// 翻页
				if(more == 'more'){uni.showLoading({ title: "加载中" });}
				this.$_Request(
					"GET","/api/v2/post/list",
					{
						"blockGroups":this.yrConfig.blockGroups,
						"whitelistKeys":"title,content,pid",
						"stickyState":type == 'stickyState'?2:'',//置顶
						"allDigest":type == 'allDigest'?1:'',//精华
						"orderType":this.types?this.types:'',
						"page":more == 'more' ? this.listPostPage : "",
					},
					(res) => {
						if(more == 'more'){
							if(res.data.data.list.length){
								this.listPost = this.listPost.concat(res.data.data.list);
								this.listPostPage++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							if(res.data.data.list.length){
								this.listPost = res.data.data.list;
								this.listPostState = "success"
							}else{
								this.listPostState = "empty"
							}
						}
					}
				)
			},
			clickPost(pid,title,content){
				let tit
				if(title){
					tit = title
				}else{
					tit = this.$_filterHtml(content)
				}
				uni.$emit('quotePost'+this.uniqueId,{pid:pid,tit:tit})
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
.QuotePost{
	.scroll{
		width: 100%;
		height: 80rpx;
		scroll-view{
			white-space: nowrap;
			width: 730rpx;
			height: 80rpx;
			background: $BeiJingSe;
			border-top: 1rpx solid $BianKuangSe;
			border-bottom: 1rpx solid $BianKuangSe;
			padding: 0 10rpx;
			view{
				display: inline-flex;
				align-items: center;
				height: 80rpx;
				text{
					padding: 0 25rpx;
				}
			}
			.hover{
				background: #FFF;
				text{
					color: $LanSe;
				}
			}
		}
	}
	.list{
		.for{
			display: flex;
			align-items: center;
			padding: 25rpx;
			border-bottom: 1rpx dashed $BianKuangSe;
			.order{
				flex-shrink: 0;
				color: $ZhanWeiSe;
			}
			.title{
				flex: 1;
				padding: 0 10rpx;
				display: -webkit-box;
				/*!autoprefixer:off*/
				-webkit-box-orient: vertical;
				/*autoprefixer:on*/
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
			.quote{
				flex-shrink: 0;
				color: $LanSe;
			}
		}
		.more{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			line-height: 28rpx;
			color: $ZhanWeiSe;
			padding: 35rpx 0;
		}
	}
}
</style>